Skip to content
This repository was archived by the owner on Dec 18, 2025. It is now read-only.

Comments

fix(@toss/react): improve readability and add dependencies useOutsideClickEffect#481

Merged
okinawaa merged 2 commits intotoss:mainfrom
Collection50:fix/react/useOutsideClickEffect
May 26, 2024
Merged

fix(@toss/react): improve readability and add dependencies useOutsideClickEffect#481
okinawaa merged 2 commits intotoss:mainfrom
Collection50:fix/react/useOutsideClickEffect

Conversation

@Collection50
Copy link
Contributor

@Collection50 Collection50 commented May 24, 2024

Overview

AS-IS

useEffect(() => {
  containers.current = (Array.isArray(container) ? container : [container]).filter(isNotNil);
}, [container]);
useEffect(() => {
  document.addEventListener('click', handleDocumentClick);
  document.addEventListener('touchstart', handleDocumentClick);

  return () => {
    document.removeEventListener('click', handleDocumentClick);
    document.removeEventListener('touchstart', handleDocumentClick);
  };
}, []);

TO-BE

useEffect(() => {
  containers.current = [container].flat(1).filter(isNotNil);
}, [container]);
useEffect(() => {
  document.addEventListener('click', handleDocumentClick);
  document.addEventListener('touchstart', handleDocumentClick);

  return () => {
    document.removeEventListener('click', handleDocumentClick);
    document.removeEventListener('touchstart', handleDocumentClick);
  };
}, [handleDocumentClick]);

PR Checklist

  • I read and included theses actions below
  1. I have read the Contributing Guide
  2. I have written documents and tests, if needed.

close #449

@Collection50
fix(@toss/react): change container array conversion logic, change use…
26e335b 
…Effect order to improve readability, add dependencies
@vercel
Copy link

vercel bot commented May 24, 2024

@Collection50 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

@okinawaa
Copy link
Member

okinawaa commented May 26, 2024

The flat method was introduced in ES2019 (ES10). Therefore, this code will work well in modern browsers, but it might not be supported in older browsers. Is this acceptable?

@Collection50
Copy link
Contributor Author

Collection50 commented May 26, 2024

The flat method was introduced in ES2019 (ES10). Therefore, this code will work well in modern browsers, but it might not be supported in older browsers. Is this acceptable?

The part I was looking for was the flat !

I'd appreciate it if you could tell me how to know the current status of support for the older browser you mentioned!

okinawaa
okinawaa approved these changes May 26, 2024
View reviewed changes
Copy link
Member

@okinawaa okinawaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have a specific browser range! yet
According to the link you sent me, it says it complies with the baseline.
I think that's enough!

@okinawaa okinawaa enabled auto-merge (squash) May 26, 2024 12:58
@okinawaa okinawaa merged commit cbd7278 into toss:main May 26, 2024
@Collection50
Copy link
Contributor Author

Collection50 commented May 26, 2024

We don't have a specific browser range! yet According to the link you sent me, it says it complies with the baseline. I think that's enough!

Thank you!!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@okinawaa okinawaa okinawaa approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Question]:useOutsideClickEffect dependancies

2 participants

@Collection50 @okinawaa